<template>
<view class="container">
    <!-- 首页标题 -->
    <view class="header">首页</view>
    
    <!-- 搜索框 -->
    <view class="search-bar">
		<input class="search-input" placeholder="搜索你需要的美食" />
		<uni-icons type="search" size="20" color="#999"></uni-icons>
    </view>
	
	<!-- 滚动图区域 -->
	<view class="banner-container">
		<swiper class="banner-swiper" 
			  :indicator-dots="true" 
			  :autoplay="true" 
			  :interval="3000" 
			  :duration="500"
			  indicator-active-color="#ff5a5f">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image class="banner-image" :src="item.image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
    
    <!-- 分类导航 -->
    <view class="category-nav">
		<view class="category-item">
			<text>附近餐厅</text>
		</view>
		<view class="category-item">
			<text>午餐</text>
		</view>
		<view class="category-item">
			<text>晚餐</text>
		</view>
		<view class="category-item">
			<text>优惠</text>
		</view>
    </view>
    
    <!-- 热门分类 -->
    <view class="hot-categories">
		<view class="hot-category-item">
			<text>炸鸡零食</text>
		</view>
		<view class="hot-category-item">
			<text>火锅</text>
		</view>
		<view class="hot-category-item">
			<text>自助餐</text>
		</view>
		<view class="hot-category-item">
			<text>夜宵</text>
		</view>
    </view>
    
    <!-- 推荐区域 -->
    <view class="recommend-section">
		<view class="section-title">美食排行榜</view>
		<!-- 这里可以放排行榜内容 -->
      
		<view class="section-title">每日推荐</view>
		<!-- 这里可以放每日推荐内容 -->
    </view>
    
    <!-- 底部导航 -->
    <view class="tab-bar">
		<view class="tab-item active">
			<text>首页</text>
		</view>
		<view class="tab-item">
			<text>发笔记</text>
		</view>
		<view class="tab-item">
			<text>消息</text>
		</view>
		<view class="tab-item">
			<text>我的</text>
		</view>
	</view>
</view>
</template>

<script>
export default {
    data() {
		return {
			// 可以在这里添加数据
			bannerList: [
				{
				  image: 'https://via.placeholder.com/300x200/FF5733/FFFFFF?text=美食推荐1',
				  url: ''
				},
				{
				  image: 'https://via.placeholder.com/300x200/C70039/FFFFFF?text=美食推荐2',
				  url: ''
				},
				{
				  image: 'https://via.placeholder.com/300x200/900C3F/FFFFFF?text=美食推荐3',
				  url: ''
				}
			]
		}
    },
    methods: {
		// 可以在这里添加方法
    }
}
</script>

<style>
.container {
	padding: 20rpx;
    padding-bottom: 100rpx; /* 为底部导航留出空间 */
}
  
.header {
	font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}
  
.search-bar {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 20px;
    padding: 10px 15px;
    margin-bottom: 15px;
}
  
.search-input {
    flex: 1;
    font-size: 28rpx;
    margin-left: 10rpx;
}
  
/* 滚动效果 */
.banner-container {
    width: 650rpx;
    height: 300rpx;
    margin: 20rpx auto;
    border-radius: 10rpx;
    overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
  
.banner-swiper {
    width: 100%;
    height: 100%;
}
  
.banner-image {
    width: 100%;
    height: 100%;
}
  
.category-nav, .hot-categories {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
}
  
.category-item, .hot-category-item {
    text-align: center;
    font-size: 28rpx;
    padding: 15rpx 0;
    flex: 1;
}
  
.section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin: 30rpx 0 20rpx 0;
}
  
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background-color: #fff;
    border-top: 1rpx solid #eee;
    padding: 15rpx 0;
}
  
.tab-item {
    flex: 1;
    text-align: center;
    font-size: 24rpx;
}
  
.tab-item.active {
    color: #ff5a5f;
    font-weight: bold;
}
</style>